<template>
  <div class="building">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="2.5">
          <el-form-item prop="status">
            <el-select
                v-model="queryParams.status"
                placeholder="房间状态"
                clearable
                style="width: 120px"
            >
                <el-option
                  v-for="dict in sys_room_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
            </el-select>
            <el-popover
              placement="bottom"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <el-icon class="ml10" style="color: var(--el-text-color-placeholder);"><QuestionFilled /></el-icon>
              </template>
              <div>
                <div>空房：无入住人的房间</div>
                <div>账单欠费：有账单到期未支付或剩余水电欠费</div>
                <div>逾期：有逾期未退房的房间</div>
                <div>维修：有报修的房间</div>
                <div>即将到期：即将到期的房间</div>
                <div>水电欠费：入住中水电欠费</div>
              </div>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="2.5">
           <el-form-item label="时间筛选" style="width: 308px" v-if="queryParams.status === '1'">
            <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2.5">
          <el-form-item prop="searchStr">
            <el-input
              v-model="queryParams.searchStr"
              placeholder="请输入入住人或房源地址"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            >
              <template #append>
                <el-button :icon="Search" @click="handleQuery" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2.5">
          <el-form-item>
            <div>数量：<span style="font-size: 20px;font-style: italic;">{{ roomCount }}</span> 间</div>
          </el-form-item>
        </el-col>
        <div style="margin-left: auto;">
          <el-button plain type="primary" @click="() => entireBuildingVisible = true">+ 添加整栋</el-button>
          <el-button type="primary">+ 添加整层</el-button>
        </div>
      </el-row>
    </el-form>
    <el-radio-group v-model="apartment" @change="radio">
      <el-radio-button label="" >全部</el-radio-button>
      <el-radio-button label="1">劲叶</el-radio-button>
    </el-radio-group>
    <div class="mt20">
      <RoomFloor />
      <RoomFloor />
    </div>
    <AddEntireBuilding :value="entireBuildingVisible" @cancel="() => entireBuildingVisible = false"></AddEntireBuilding>
  </div>
</template>
<script setup name="Building">
import { QuestionFilled, Search, MoreFilled } from '@element-plus/icons-vue'
import RoomFloor from './component/roomFloor.vue'
import AddEntireBuilding from './component/addEntireBuilding.vue'

const { proxy } = getCurrentInstance();
// 系统字典的获取方式
const { sys_room_status } = proxy.useDict("sys_room_status");


const dateRange = ref([]);
const showSearch = ref(true)
const roomCount = ref(0)
const apartment = ref('')
const entireBuildingVisible = ref(false)
function radio(value) {
  console.log('radio>>>', value);
}
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: undefined,
    searchStr: undefined
  },
})
const { queryParams } = toRefs(data);

function getList() {
  console.log('queryParams>>>', proxy.addDateRange(queryParams.value, dateRange.value));
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
};
</script>